<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
  <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  <!-- <hello /> -->
  
  <!-- <el-button type="primary">这是一个按钮</el-button>
  <el-card class="box-card">
    <template #header>
      <span>卡片名称</span>
      <el-button style="float:right">操作按钮</el-button>
    </template>
    <div v-for="o in 4" :key="o" class="text item">
      {{ '列表内容' + o }}
    </div>
  </el-card> -->
  <el-card>
    <template #header>
      <div>
        <span>
          <router-link to="/">首页</router-link>
        </span>&nbsp;
        <span>
          <router-link to="/news">新闻</router-link>
        </span>&nbsp;
        <span>
          <router-link to="/books">图书</router-link>
        </span>&nbsp;
        <span>
          <router-link to="/videos">视频</router-link>
        </span>&nbsp;
        <span>
          <router-link to="/about">关于作者</router-link>
        </span>
        <span>
          <router-link to="/dongtai">动态组件</router-link>
        </span>
        
      </div>
    </template>
    <div>
      <router-view></router-view>
    </div>
  </el-card>
  <!-- <textUi /> -->
</template>

<script>
// import hello from '@/components/hello.vue'
// import textUi from '@/components/textUi.vue'


export default {
  name: 'App',
  components: {
    //  
    // textUi
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
